<template>
  <div class="layui-container fly-marginTop fly-user-main">
    <ul class="layui-nav layui-nav-tree">
      <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
      <li v-for="(item, index) in menus" class="layui-nav-item" :key="'menu' + index">
        <router-link :to="item.path" :active-class="item.activeClass">
          <i class="layui-icon" :class="item.icon"></i>
          {{ item.name }}
        </router-link>
      </li>
    </ul>
    <div class="wrap fly-user-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Center',
  data () {
    return {
      menus: [
        {
          name: '我的主页',
          icon: 'layui-icon-home',
          path: '/user'
        },
        {
          name: '用户中心',
          icon: 'layui-icon-friends',
          path: '/center'
        },
        {
          name: '基本设置',
          icon: 'layui-icon-set',
          path: '/center/setting',
          activeClass: 'layui-this'
        },
        {
          name: '我的帖子',
          icon: 'layui-icon-form',
          path: '/center/post',
          activeClass: 'layui-this'
        },
        {
          name: '我的消息',
          icon: 'layui-icon-reply-fill',
          path: '/center/message'
        },
        {
          name: '其他设置',
          icon: 'layui-icon-component',
          path: '/center/other'
        }
      ]
    }
  }
}
</script>

<style scoped>
@import "~@/assets/iconfont/iconfont.css";
  .layui-icon {
    margin-right: 10px;
    font-size: 16px;
  }
  .layui-container {
    display: flex;
    margin-top: 15px;
    .layui-nav {
    }
  }
  .wrap {
    flex: 1;
    margin-left: 20px;
  }
</style>
